@import '~@styles/common.less';

.DraftInput {
  width: 100%;
  height: 100%;

  .comments {
    padding-top: 20px;
    font-size: 18px;
    font-weight: 600;
  }

  .content {
    display: flex;
    padding-top: 20px;

    .avatar {
      margin-right: 20px;

      .image {
        width: 50px;
        height: 50px;
        border-radius: 50px;
      }
    }
  }

  .input {
    flex: 1;

    .textAreaWrap {
      width: 100%;

      .textArea {
        border: none;
        border-radius: 5px;
        background-color: @background;

        &:focus {
          background-color: @fff;
        }
      }

      .darkTextArea {
        background-color: @dark-bgc;
        color: @dark-fc;

        &:focus {
          background-color: @dark-gray;
          color: @dark-fc;
        }
      }
    }

    .emojiWrap {
      display: flex;
      justify-content: space-between;
      position: relative;
      margin-top: 10px;
      width: 100%;

      .iconfontWrap {
        display: flex;

        &>span:first-child {
          margin-right: 20px;
        }
      }

      .iconfont {
        display: flex;
        align-items: center;
        cursor: pointer;
        height: 32px;
        line-height: 32px;

        .iconText {
          font-size: 14px;
          margin-left: 3px;
        }
      }

      .uploadStyle {
        height: 0;
      }

      #ACTION {
        position: absolute;
        right: 10px;
      }

      .enter {
        margin-right: 15px;
        color: @font-3;
      }

      .darkBtn {
        :global {
          .ant-btn-primary[disabled] {
            background-color: @dark-gray;
            color: @dark-fc;
            border: @dark-gray;
          }
        }
      }
    }

    .hide {
      display: none;
    }
  }
}

.emojiPopover {
  :global {
    .ant-popover-inner-content {
      padding: 16px 6px 10px 16px;
    }
  }
}

@media screen and (max-width: 960px) {
  .DraftInput {
    .content {
      .avatar {
        margin-right: 10px;

        .image {
          width: 45px;
          height: 45px;
        }
      }
    }

    .input {
      flex: 1;
    }
  }
}